<template>
    <div class="directory-list">
        <div class="directory-list__content">
            <menu-list @select="handleSelectId" ref="menu"></menu-list>
            <el-container class="article-management" v-if="directoryId">
                <el-header class="article-management__header">
                    <div class="article-management__header-main">
                        <el-input size="small" clearable v-model="searchKey" placeholder="请输入文章标题"
                            class="management__headerInput" style="width: 300px" />
                        <el-button type="primary" style="margin-right: 88px" @click="refresh" size="small">搜索</el-button>
                        <el-button type="success" @click="handleAdd" size="small">新增文章</el-button>
                    </div>
                </el-header>
                <el-main class="article-management__content">
                    <div ref="container" class="table-container">
                        <el-table ref="table" :data="datas" style="width: 100%" align="center" header-align="center">
                            <el-table-column label="标题">
                                <template slot-scope="scope">
                                    <div class="table-container-first">
                                        <div class="isTop" v-if="scope.row.isTop"></div>

                                        <div class="first-content">{{ scope.row.title }}</div>
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column label="来源" prop="classify" />
                      

                            <el-table-column label="发布时间">
                                <template slot-scope="scope">
                                    {{ $formatTime(scope.row.publishTime) }}
                                </template>
                            </el-table-column>

                            <el-table-column label="具备封面" center>
                                <template slot-scope="scope">
                                    {{ scope.row.poster ? "是" : "" }}
                                </template>
                            </el-table-column>

                            <el-table-column label="操作" width="300px">
                                <template slot-scope="scope">
                                    <el-button size="small" @click="handlePreview(scope.row)">预览</el-button>
                                    <el-button size="small" type="success" @click="handleEdit(scope.row)">编辑</el-button>
                                    <el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
                                    <el-button size="small" @click="toogleTop(scope.row)"
                                        :type="!scope.row.isTop ? 'warning' : ''">{{ scope.row.isTop ? "取消置顶" : "置顶"
                                        }}</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </el-main>
                <div class="pagination-container">
                    <el-pagination v-if="total" :current-page="pageNum" :page-size="pageSize"
                        layout="prev, pager, next, total" :total="total" background @current-change="handlePageChange" />
                </div>
            </el-container>
        </div>
    </div>
</template>

<script>
import menuList from "./components/menu.vue";
import { isDev } from "@/utils/api";

const key = "directory-list-id";

export default {
    name: "directory-list",
    components: {
        menuList,
    },
    data() {
        return {
            searchKey: "",
            pageNum: 1,
            pageSize: 10,
            total: 0,
            datas: [],
            directoryId: 0,
        };
    },

    mounted() {
        this.init();
    },

    methods: {
        init() {
            try {
                const { menu } = this.$refs;
                const directoryId = Number(localStorage.getItem(key));
                return directoryId && menu && menu.setCurrentExpandedId(directoryId);
            } catch (error) {
                console.log(error);
            }
        },

        handleSelectId(id) {
            this.directoryId = id;
            localStorage.setItem(key, id);
            this.searchKey = "";
            this.refresh();
        },

        handlePageChange(pageNum) {
            this.pageNum = pageNum;
            this.fetchDatas();
        },
        async fetchDatas() {
            const loading = this.$loading();
            const params = {
                directoryId: this.directoryId,
                search: this.searchKey,
                pageNum: this.pageNum,
                pageSize: this.pageSize,
            };
            const { data } = await this.$fetch.get(
                "/api/directory-article/list",
                params
            );
            this.datas = data.sorts.map((item) => {
                const { article = {}, ...others } = item || {};
                return {
                    ...others,
                    ...article,
                };
            });
            this.total = data.total;
            loading.close();
            this.$nextTick(() => {
                this.$refs.table.bodyWrapper.scrollTop = 0;
            });
        },
        refresh() {
            this.pageNum = 1;
            this.fetchDatas();
        },
        handleAdd() {
            this.$router.push({
                path: "/directory/article-edit",
                query: {
                    type: "add",
                    directoryId: this.directoryId,
                },
            });
        },

        handleEdit(row) {
            this.$router.push({
                path: "/directory/article-edit",
                query: {
                    type: "edit",
                    publishTime: row.publishTime,
                    articleId: row.articleId,
                    directoryId: row.directoryId,
                },
            });
        },

        async toogleTop(row) {
            const { directoryId, articleId, isTop } = row;
            const url = isTop
                ? "/api/directory-article/cancelTop"
                : "/api/directory-article/setTop";
            const { code } = await this.$fetch.post(url, { directoryId, articleId });
            if (code === 0) {
                this.$message.success(isTop ? "取消置顶成功" : "置顶成功");
            }
            this.refresh();
        },

        handleDelete(items) {
            this.$confirm("此操作将删除该栏目该文章, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(async () => {
                    const { code } = await this.$fetch.post(
                        "/api/directory-article/delete",
                        items
                    );
                    if (code === 0) {
                        this.$message.success("删除成功");
                        this.refresh();
                    }
                })
                .catch(() => {
                    this.refresh();
                });
        },

        handlePreview({ articleId }) {
            let url = ""
            if (isDev) {
                url = "https://buss-asso.enmooy.com/article-detail/"
            } else {
                url = window.location.origin + '/article-detail/'
            }
            window.open(url + articleId)

        },
    },
};
</script>

<style scoped lang="scss">
.directory-list {
    display: flex;
    flex-direction: column;
}

.directory-list__content {
    display: flex;
    flex-direction: row;

    .content-tree {
        width: 300px;

        .custom-tree-node {
            flex: 1;
            display: flex;
            align-items: center;
            font-size: 14px;
            padding-right: 8px;
        }
    }

    .content-table {
        flex: 1;
    }
}

.article-management {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 50px);
    flex: 1;

    .article-management__header {
        display: flex;
        align-items: center;

        .article-management__header-main {
            height: 40px;
            display: flex;
            align-items: center;

            .management__headerInput {
                margin-right: 20px;
            }
        }
    }

    .article-management__content {
        display: flex;
        flex-direction: column;
        flex: 1;
        overflow: auto;
        padding-bottom: 0;

        .table-container {
            flex: 1;
            overflow: hidden;
            overflow-y: auto;

            .table-container-first {
                display: flex;
                align-items: center;
                justify-content: center;

                .first-content {
                    flex: 1;
                }

                .isTop {
                    width: 16px;
                    height: 16px;
                    background: url(./assets/isTop.svg);
                    background-repeat: no-repeat;
                    background-position: center center;
                    margin-right: 10px;
                }
            }
        }
    }

    .pagination-container {
        display: flex;
        justify-content: center;
        padding: 10px 0;

        .el-pagination {
            padding: 20px 0;
        }
    }
}

::v-deep .el-table {
    display: flex;
    height: 100%;
    /* overflow: auto; */
    flex-direction: column;

    .el-table__body-wrapper {
        flex: 1;
        overflow-y: auto;
    }

    .cell {
        width: 100%;
        height: 100%;
        padding: 0;
        padding-right: 10px;
    }
}

.text-overflow {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
}
</style>
